<!DOCTYPE html>
<html>
<meta charset="uft-8">
<link rel="stylesheet">

<head>
	<title>闯关模式</title>
	<style type="text/css">
	/*刘弟代码*/
	*{margin: 0;padding: 0;list-style-type:none; }
	.zhu{
		width: 100%;
	}
	.zhu-one{
		width: 1000px;
		height: 500px;
		margin:100px auto;
		background-color: #0f0;
		position: relative;
	}
	.caidan{
		width: 252px;
		height: 20px;
		background-color: #0f0;
		margin: 0 auto;
	}
	.test1{
		list-style: none;
	}
	.test2{
        text-align: center;
        line-height: 20px;
        float: left;
        position: relative;
	}
	.test3{
		text-decoration: none;
		color: #06f;
		padding: 0 10px;
		display: block;
	}
	.test3:hover{
		color: #fff;
		background-color: #666;
	}
	.test4{
		float: none;
		margin-top: 2px;
	}
	.test5{
		position: absolute;
		left: 0px;
		top: 20px;
		display: none;
	}
	.test6{
		text-decoration: none;
		color: #06f;
		padding: 0 10px;
		display: block;
	}
	.test6:hover{
		color: #fff;
		background-color: #666;
	}
	.test2:hover ul{
		display: block;
	}
	.tuziwodaxiao{
		width: 109px;
		height: 420px;
	}
	.tuziwo{
		display: block;
	}
	#laoshu1{
		position: absolute;
		right: 0;
		top: 80px;
       
    }
    #shengming1{
    	position: absolute;
		right: 0;
		top: 120px;
    }
    #laoshu2{
        position: absolute;
        right: 0;
       	top: 180px;
    }
    #laoshu3{
        position: absolute;
        right: 0;
        top: 280px;
        
    }
    #shengming2{
    	position: absolute;
		right: 0;
		top: 320px;
    }
    #laoshu4{
        position: absolute;
        right: 0;
        top: 380px;
    }
    .tu{
        position: absolute;
        left: 110px;
        top: 210px;
    }
    #jian{
        position: absolute;
        left: 90px;
        top: 58px;
    }
    .xue{
    	width: 210px;
	    height: 20px;
	    float: left;
	    }
	.hide{
		position: absolute;
		left: 40px;
	    top: 0px;
		width: 210px;
	    height: 20px;
	    overflow: hidden;
	}
	.time{
		position: absolute;
		left: 850px;
		top: 0px;
		width: 50px;
	    height: 20px;
		color: #dc143c;
	}
	</style>
	<script src="jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" >
    	//李旭 刘文强代码
        var i = 0;
        
        $(window).keydown(function(event){
        	var tu = $("#tu");
        	var text = $("#jian");
        	var laoshu = '';/*设置一个变量名laoshu为空*/
                $('.laoshu').each(function() {
                    /*找到class+laoshu的语句并找到匹配元素规定运行的函数*/
                    laoshu += $(this).offset().top + ',';/*匹配元素在当前画面的相对偏移*/
                });
                laoshu = laoshu.substring(0, laoshu.length - 1);/*提取字符串中介于连个制定下标之间的字符，laoshu的位置     老鼠位置长度-1*/
                var keyNum = event.which;/*显示按了那个键*/
                tu.css({
                position: 'absolute',
                }); 
            switch(keyNum) { //判断按键
            	case 38:
            	tu.animate({top: '-=20px'});
                text.animate({top: '-=20px'});
                break;

            	case 40:
                tu.animate({top: '+=20px'});
                text.animate({top: '+=20px'});
            	break;
            	default:
                break;
            } 
            text.css({
                position: 'absolute',
                }); 
                switch(keyNum) { //判断按键
                	case 13:
                	text.animate({left: '814px'}, function() {
                    //alert($(this).offset().top - 108);
                    //alert(laoshu.indexOf($(this).offset().top - 108));
                    if (($(this).offset().top - 108) == 80) {
                        $('#laoshu1').hide();/*射老鼠*/
                    }
                    if (($(this).offset().top - 108) == 180) {
                        $('#laoshu2').hide();
                    }
                    if (($(this).offset().top - 108) == 280) {
                        $('#laoshu3').hide();
                    }
                    if (($(this).offset().top - 108) == 380) {
                        $('#laoshu4').hide();
                    }
                    $(this).hide();
                    $(this).css('left', '90px');
                    $(this).show();
                });
            break;
            //控制血量平衡
            case 32:
            var xue = $('.xue').width();
            text.animate({left: '814px'}, function() {
                if (($(this).offset().top - 108) == 80) {
                    $('#laoshu1').hide();
                    $('.xue').css('width', (xue + 21) + 'px');
                }
                if (($(this).offset().top - 108) == 120) {
                    $('#shengming1').hide();
                    $('.xue').css('width', (xue + 21) + 'px');
                }
                if (($(this).offset().top - 108) == 180) {
                    $('#laoshu2').hide();
                    $('.xue').css('width', (xue + 21) + 'px');
                }
                if (($(this).offset().top - 108) == 280) {
                    $('#laoshu3').hide();
                    $('.xue').css('width', (xue + 21) + 'px');
                }
                if (($(this).offset().top - 108) == 320) {
                    $('#shengming2').hide();
                    $('.xue').css('width', (xue + 21) + 'px');
                }
                if (($(this).offset().top - 108) == 380) {
                    $('#laoshu4').hide();
                    $('.xue').css('width', (xue + 21) + 'px');
                }
                $(this).hide();
                $(this).css('left', '90px');
                $(this).show();
            });
            break;
            default:
            break;
            } 
        });
	    $(document).ready(function(){
	        setTimeout(function () { abc(); }, 1000);
	    });
	    //老鼠移动
	    var flag = true;
	    function abc(){
	        if (flag) {
	            $("#laoshu1").animate({left:'250px'},15000);
	            $("#shengming1").animate({left:'250px'},15000);
	            $("#laoshu2").animate({left:'250px'},17200);
	            $("#laoshu3").animate({left:'250px'},16000);
	            $("#shengming2").animate({left:'250px'},14000);
	            $("#laoshu4").animate({left:'250px'},18300);
	            $('#laoshu1').hide(1000,function(){
	            	$(this).css('left', '936px');
                	$(this).show();
                	var xue = $('.xue').width();
	                if (xue == '0') {
	                    self.location = "结束界面1.html";
	                } else {
	                    $('.xue').css('width', (xue - 21) + 'px');
	                    abc();
	                }
	            });
	            $('#shengming1').hide(5000,function(){
	            	$(this).css('left', '936px');
                	$(this).show();
                	var xue = $('.xue').width();
	                if (xue == '0') {
	                    self.location = "结束界面1.html";
	                } else {
	                    abc();
	                }
	            });
	            $('#laoshu2').hide(1000,function(){
	                $(this).css('left', '936px');
	                $(this).show();
	                var xue = $('.xue').width();
	                if (xue == '0') {
	                    self.location = "结束界面1.html";
	                } else {
	                    $('.xue').css('width', (xue - 21) + 'px');
	                    abc();
	                }
	            });
	            $('#laoshu3').hide(1000,function(){
	                $(this).css('left', '936px');
	                $(this).show();
	                var xue = $('.xue').width();
	                if (xue == '0') {
	                    self.location = "结束界面1.html";
	                } else {
	                    $('.xue').css('width', (xue - 21) + 'px');
	                    abc();
	                }
	            });
	            $('#shengming2').hide(5000,function(){
	            	$(this).css('left', '936px');
                	$(this).show();
                	var xue = $('.xue').width();
	                if (xue == '0') {
	                    self.location = "结束界面1.html";
	                } else {
	                    abc();
	                }
	            });
	            $('#laoshu4').hide(1000,function(){
	                $(this).css('left', '936px');
	                $(this).show();
	                var xue = $('.xue').width();
	                if (xue == '0') {
	                    self.location = "结束界面1.html";
	                } else {
	                    $('.xue').css('width', (xue - 21) + 'px');
	                    abc();
	                }
	            });
	        }
	    }
	    	//设置倒计时
	    	var maxtime = 60;    
            function CountDown() {
                if (maxtime >= 0) {
                    seconds = Math.floor(maxtime);
                    msg = seconds + "秒";
                    document.all["timer"].innerHTML = msg;
                    --maxtime;
                } else{
                    self.location = "结束界面2.html";
                }
            }
            timer = setInterval("CountDown()", 1000);
    </script>
</head>
<body>
	<!--刘嘉喜代码-->
<div class="zhu">
	<div class="zhu-one">
		<div class="hide">
			<img src="images\healthbar.png" class="xue">
    	</div>
    	<div class="time" id="timer">
    	</div>
		<div class="caidan">
		    <ul class="test1">
		    <li class="test2"><a href="#" class="test3">改选模式</a>
		    	<ul class="test5">
		    		<li class="test4"><a class="test6" href="普通模式.html">普通模式</a></li>
		    		<li class="test4"><a class="test6" href="无尽模式.html">无尽模式</a></li>
		    	</ul>
		    </li>
		    <li class="test2"><a href="登录界面.html" class="test3">退出界面</a></li>
		    <li class="test2"><a href="结束界面1.html" class="test3">结束游戏</a></li>
		    </ul>
	    </div>
	    <div>
	    	<ul class="tuziwodaxiao">
	    		<li class="tuziwo"><img src="images\castle.png"></li>
	    		<li class="tuziwo"><img src="images\castle.png"></li>
	    		<li class="tuziwo"><img src="images\castle.png"></li>
	    		<li class="tuziwo"><img src="images\castle.png"></li>
	    	</ul>
	    	<img src="images\badguy.png" id="laoshu1">
	    	<img src="images\小红心.jpg" id="shengming1">
			<img src="images\badguy.png" id="laoshu2">
			<img src="images\badguy.png" id="laoshu3">
			<img src="images\小红心.jpg" id="shengming2">
			<img src="images\badguy.png" id="laoshu4">
			<div class="tu">
     			<img src="images\dude.png" width="150px" height="100px" id="tu">
        		<img src="images\bullet.png" id="jian"> 
     		</div>
	    </div>
	</div>
</div>
</body>
</html>